import { defineComponent, PropType,useAttrs } from "vue";
import { MenuItem } from "./types";
import { toLine } from "@/utils";
import * as Icons from "@element-plus/icons";
import './styles/menu.scss'

export default defineComponent({
  props: {
    // 导航菜单的数据
    data: {
      type: Array as PropType<MenuItem[]>,
      required: true,
    },
    // 默认选中的菜单
    defaultActive: {
      type: String,
      default: "",
    },
    // 是否是路由模式
    router: {
      type: Boolean,
      default: false,
    },
    // 键名
    // 菜单标题的键名
    name: {
      type: String,
      default: "name",
    },
    // 菜单标识的键名
    index: {
      type: String,
      default: "index",
    },
    // 菜单图标的键名
    icon: {
      type: String,
      default: "icon",
    },
    // 菜单子菜单的键名
    children: {
      type: String,
      default: "children",
    },
  },
  setup(props, ctx) {
    console.log(props.data);
    let attrs = useAttrs()
    console.log(attrs);
    let renderMenu = (data: MenuItem[]) => {
      return data.map((item: MenuItem) => {
        // 每个菜单的图标
        item.i = (Icons as any) [item.icon!]
        // console.log(item.i);
        // 处理sub-menu的插槽
        let slots = {
          title: () => {
            return <>
              <item.i  />
              <span>{item.name}</span>
            </>
          }
        }
        // 递归渲染children
        if (item.children! && item.children!.length) {
          return (
            <el-sub-menu index={item.index} v-slots={slots} class="menu-icon-svg">
              {renderMenu(item.children!)}
            </el-sub-menu>
          )
        }
        // 正常渲染普通的菜单
        return (
          <el-menu-item index={item.index}>
            <item.i />
            <span>{item.name}</span>
          </el-menu-item>
        )
      })
    }
    
    return () => {
      return (
        <el-menu
          class="menu-icon-svg"
          default-active={props.defaultActive}
          router={props.router}
          {...attrs}
        >
          {renderMenu(props.data)}
        </el-menu>
      )
    };
  },
});
